<template>
  <div class="sort-wrap">
    <div class="col">
      <div class="title">{{ $t("formgen.sort.leftDesc") }}</div>
      <div class="left-draggable-group">
        <VueDraggable
          v-model="changeSortList"
          animation="150"
          ghostClass="ghost"
          group="people"
          :clone="clone"
          :sort="false"
          class="left-draggable"
        >
          <div
            class="item"
            v-for="element in changeSortList"
            :key="`${element.value}old`"
          >
            <div class="item-name">{{ element.label }}</div>
          </div>
        </VueDraggable>
      </div>
    </div>
    <div class="col">
      <div class="title">{{ $t("formgen.sort.rigthDesc") }}</div>
      <div class="right-draggable-group">
        <VueDraggable
          v-if="changeValue"
          v-model="changeValue"
          animation="150"
          group="people"
          ghostClass="ghost"
          class="right-draggable"
          @move="onRightMove"
        >
          <div
            class="item"
            v-for="(element, index) in changeValue"
            :key="`${element.value}`"
          >
            <div>
              <span class="seq-num">
                {{ index + 1 }}
              </span>
              <span class="item-name">{{ element.label }}</span>
            </div>
          </div>
        </VueDraggable>
      </div>
    </div>
  </div>
</template>

<script name="TSort" setup>
import { onMounted, ref, watch } from "vue";
import { VueDraggable } from "vue-draggable-plus";

import { formEmits, formItemProps, useFormItem } from "../hooks/useFormItemHook";

const changeSortList = ref([]);
const changeSort1List = ref([]);

const props = defineProps({
  ...formItemProps,
  sortList: {
    type: Array,
    default: () => []
  }
});

const emits = defineEmits(formEmits);
const { changeValue } = useFormItem(props, emits);

watch(
  () => props.sortList,
  val => {
    changeSortList.value = changeValue.value ? val.filter(item => !changeValue.value.find(i => i.value === item.value)) : val;
  },
  {
    deep: true
  }
);

onMounted(() => {
  changeSortList.value = changeValue.value
    ? props.sortList.filter(item => !changeValue.value.find(i => i.value === item.value))
    : props.sortList;
});

const onRightMove = (e, originalEvent) => {
  if (e.to.className !== "right-draggable") {
    return false;
  }
  //false表示阻止拖拽`
  return true;
};

const clone = element => {
  return {
    label: `${element.label}`,
    value: `${element.value}`
  };
};
</script>
<style lang="scss" scoped>
.chosenClass {
  opacity: 1 !important;
}

.sort-wrap {
  margin: 10px;
  user-select: none;
}

.title {
  user-select: none;
  padding: 6px 12px;
}

.col {
  width: 48%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
  min-height: 150px;
}

.col + .col {
  margin-left: 10px;
}

.item {
  line-height: 30px;
  min-height: 30px;
  border: solid 1px #eee;

  &:hover {
    background-color: #fdfdfd;
    cursor: move;
  }

  .item-name {
    margin-left: 10px;
    word-break: break-all;
  }
}

.item + .item {
  margin-top: 6px;
}

.right-draggable {
  min-height: 100px;

  .right-draggable-group {
    min-height: 100px;
    display: block;
  }
}

.seq-num {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #409eff;
  display: inline-block;
  text-align: center;
  color: #ffffff;
  line-height: 20px;
  margin: 0px 5px;
}

@media screen and (max-width: 768px) {
  .title {
    padding: 0 !important;
  }
}
</style>
